<section [formGroup]="checkMessageConfigForm" class="tb-form-panel stroked">
  <div class="tb-form-row no-padding no-border space-between">
    <div class="tb-form-panel-title tb-required" translate>tb.rulenode.fields-to-check</div>
    <div class="tb-form-panel-hint tb-error" translate [hidden]="!(touchedValidationControl && checkMessageConfigForm.hasError('atLeastOne'))">
      tb.rulenode.at-least-one-field-required
    </div>
  </div>
  <tb-string-items-list editable subscriptSizing="dynamic"
                        [label]="'tb.rulenode.data-keys' | translate"
                        [placeholder]="'tb.rulenode.add-message-field' | translate"
                        formControlName="messageNames">
    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
              matTooltip="{{ 'tb.rulenode.chip-help' | translate: { inputName: 'tb.rulenode.field-name' | translate } }}">help</mat-icon>
  </tb-string-items-list>
  <tb-string-items-list editable subscriptSizing="dynamic"
                        [label]="'tb.rulenode.metadata-keys' | translate"
                        [placeholder]="'tb.rulenode.add-metadata-field' | translate"
                        formControlName="metadataNames">
    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
              matTooltip="{{ 'tb.rulenode.chip-help' | translate: { inputName: 'tb.rulenode.field-name' | translate } }}">help</mat-icon>
  </tb-string-items-list>
  <div tb-hint-tooltip-icon="{{ 'tb.rulenode.check-all-keys-tooltip' | translate }}"
       class="tb-form-row no-border no-padding">
    <mat-slide-toggle class="mat-slide" formControlName="checkAllKeys">
      {{ 'tb.rulenode.check-all-keys' | translate }}
    </mat-slide-toggle>
  </div>
</section>
